import Icon from '@ant-design/icons';
import { FloatButton } from 'antd';
import { useMemo, useState } from 'react';
import _2dSvg from '../../icons/2d.svg?react';
import _3dSvg from '../../icons/3d.svg?react';
import type { IconType } from '../index.d';
import styles from '../index.module.less';

const XDMode: React.FC<{
  onModeClick: (mode: string) => void;
}> = (props) => {
  const { onModeClick } = props;

  const [xdMode, setXdMode] = useState('2d');

  const icons: IconType = useMemo(
    () => ({
      _2d: <Icon component={_2dSvg} />,
      _3d: <Icon component={_3dSvg} />,
    }),
    [],
  );

  return (
    <FloatButton
      className={styles.xdbtn}
      icon={icons[`_${xdMode}`]}
      shape="square"
      tooltip={{
        title: '2D/3D 地图切换',
        placement: 'left',
      }}
      onClick={() => {
        const mode = xdMode === '2d' ? '3d' : '2d';
        setXdMode(mode);
        onModeClick(mode);
      }}
    />
  );
};

export default XDMode;
